<template>
<<<<<<< HEAD
    <div ref="mapContainer" class = "map"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Map, View } from "ol";
import {getTopLeft, getWidth} from 'ol/extent.js';
import { MousePosition } from "ol/control";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import { fromLonLat, get as getProjection } from "ol/proj";
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

const mapContainer = ref(null);
const projection = getProjection("EPSG:3857");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(18);
const matrixIds = new Array(18);
for (let z = 0; z < 18; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}

onMounted(async () => {
  const map = new Map({
    layers: [
      new TileLayer({
        opacity: 0.7,
        source: new WMTS({
          attributions:
            'Tiles © <a href="https://mrdata.usgs.gov/geology/state/"' +
            ' target="_blank">USGS</a>',
          url: "https://mrdata.usgs.gov/mapcache/wmts",
          layer: "sgmc2",
          matrixSet: "GoogleMapsCompatible",
          format: "image/png",
          projection: projection,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds,
          }),
          style: "default",
          wrapX: true,
        }),
      }),
    ],
    target: mapContainer.value,
    view: new View({
      center: [-11158582, 4813697],
      zoom: 4,
    }),
  });
});
</script>

<style scoped>
</style>
=======
    <div>
        <header>
            openlayers wmts 数据源
        </header>
        <div id="map" style="height: 100%;width: 100%;">

        </div>
    </div>
</template>

<script lang="ts" setup> 
import { onMounted } from 'vue'
import { Map, View } from 'ol';
import { MousePosition } from 'ol/control';
onMounted(async () => { 

    let view = new View({
        center: [0, 0],
        projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
        zoom: 12 // 地图缩放级别（打开页面时
    });
    let map = new Map({
        target: 'map',
        layers: [
            
        ],
        view
    })
    map.addControl(new MousePosition())
});
</script>
>>>>>>> e42c84f (feat(router): 添加路由配置并优化菜单结构)
